import React, { useState } from 'react'

type ObjectType ={  //声明对象
  name:string
  age:string
  tel:number
  id:number
}

const initObj ={ //初始化数据
  name:'jeremy',
  age:'20',
  tel:13554823452,
  id:0
}

type User = {
  name: string
  age: number
}

 const UseStateHook = ( ) =>{

  const [number,setNumber] = useState(0) //类型自动推导为 number

  const [booleanState , setBooleanState] = useState(false) //类型自动推导false

  const [arr] = useState(['a','b']) //arr 自动推导成 string[]  但是这样，你赋值不来 setArr是报错的
  // console.log(arr); // 组件内的全局 arr

  const [newArr,setNewArr] =useState(['a','b']) //换成这样的才能set
  function testArr(){
    setNewArr([])
  }

const [obj,setObj] =useState ([initObj]) //状态存储着对象数组
 function testObj(){
   console.log(obj);
  let changeObj:ObjectType[]= [{ //我的这个对象少了一个 id 这是我需要重构
    name:'tom',
    age:'21',
    tel:164649989,
    id:0
  },
  {
    name:'jerry',
    age:'21',
    tel:1555,
    id:0
  },
]
  changeObj.map((item,index)=>{ //重构数组
    item.id = index
    return item
  })
   setObj(changeObj) //设置数组对象
 }

/**
 *
 *  注意一点 在与后端交互的过程当中 我们一般是在 interface.ts 里面定义好数据类型
 *   比如：export type RunningDetail = {
            id: number
            nickname: string
            duration: number
            startTime: string
            endTime: string
          }
 * 然后通过 axios去请求：
        export function getDetail(runningId: number) {
          return axios.get<CommonResponse<RunningDetail[]>>(
            `/app/running/castScreen/item?runningId=${runningId}`,
          )
        }

*  然我们的后端没有返回id序号的时候 我们需要重构数组
          const initArr = {
                      nickname: '',
                      duration: 0,
                      startTime: '',
                      endTime: '',
                      id: 0,
                    }

const [listData, setListData] = useState<RunningDetail[]>([initArr])

//  重构数据
 API.application.getDetail(runningId).then((res) => {
        res.data.data.map((item, i) => {
          item.id = i + 1
          return item
        })
        setListData(res.data.data) //这样子的id 就被加上去了 ！！！
      })
 */

    const [user,setUser] = useState<User | null>(null) //还可以这样去处置对象 初始值为null
     function changeUser(){
       console.log(user);
       setUser(null)  //这两种设置对象的方式都没有错
       setUser({
         name:"jeremy",
         age:20
       })
     }

     // user会自动推导为类型: {name: string}   类似这种只适合存储一些全局数据？
  const [userInfo] = React.useState({ name: 'jeremy', age: 22 })

  // useCallback 防止返回渲染
  const showUser = React.useCallback((userObj: typeof userInfo) => {
    return `My name is ${userObj.name}, My age is ${userObj.age}`
  }, [])

  return (<>
  <div className="App">useState的一些用法-----用户: {showUser(userInfo)}</div>
  </>)
}

export default UseStateHook
